<template >
  <div class="img-upload">
    <el-upload action="#" :auto-upload="false" :show-file-list="false" :before-upload="beforeUpload" :on-change="handleSuccess" v-if="limit==1" :class="imgList.length ? 'hover' : ''">
      <img v-if="imgList.length" :src="imgList[0].url" class="img">
      <i class="el-icon-plus uploader-icon" v-if="!imgList.length"></i>
      <span class="el-upload-list__item-actions index2">
        <span class="el-upload-list__item-delete" @click.stop="handleRemove">
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </el-upload>
    <el-upload action="#" list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload" :on-change="handleSuccess" :file-list="imgList" :class="{hide:imgList.length==limit}" v-else>
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-left" @click.stop="handleLeft(file)" v-if="file.name != 0">
            <i class="el-icon-back"></i>
          </span>
          <span class="el-upload-list__item-delete" @click.stop="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
          <span class="el-upload-list__item-right" @click.stop="handleRight(file)" v-if="file.name < imgList.length-1">
            <i class="el-icon-right"></i>
          </span>
        </span>
      </div>
    </el-upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgServer: api.common.uploadImage,
      imgList: [],
      rebackList: [],
      type: ["image/jpeg", "image/gif", "image/bmp", "image/png"],
      // disabled: false // 是否可上传
    };
  },
  methods: {
    handleSuccess: function (file, fileList) {
      // this.fileList = fileList;
      let params = new FormData();
      params.append("file", file.raw);
      axios
        .post(api.common.uploadImage, params, {
          headers: {
            Authorization: this.$store.state.token,
          },
        })
        .then((response) => {
          // this.disabled = true;
          this.imgList.push({ name: this.imgList.length, url: response.url });
          if (this.limit == 1) {
            this.rebackList = this.imgList[0].url;
            this.$emit("change", this.rebackList);
          } else {
            this.rebackList = this.imgList.map((item) => {
              return item.url;
            });
            this.$emit("change", this.rebackList);
          }
        });
    },
    handleLeft: function (file) {
      var index;
      this.imgList.forEach((item, i) => {
        if (item == file) index = i;
      });
      if (index != 0) {
        this.imgList[index] = this.imgList.splice(
          index - 1,
          1,
          this.imgList[index]
        )[0];
      } else {
        this.imgList.push(this.imgList.shift());
      }
      this.imgList = this.imgList.map((item, index) => {
        item.name = index;
        return item;
      });
    },
    handleRight: function (file) {
      var index;
      this.imgList.forEach((item, i) => {
        if (item == file) index = i;
      });
      if (index != this.imgList.length - 1) {
        this.imgList[index] = this.imgList.splice(
          index + 1,
          1,
          this.imgList[index]
        )[0];
      } else {
        this.imgList.unshift(this.imgList.splice(index, 1)[0]);
      }
      this.imgList = this.imgList.map((item, index) => {
        item.name = index;
        return item;
      });
    },
    handleRemove: function (file) {
      this.imgList.splice(file.name, 1);
      this.imgList = this.imgList.map((item, index) => {
        item.name = index;
        return item;
      });
      if (this.limit == 1) {
        this.$emit("change", []);
      } else {
        this.rebackList = this.imgList.map((item) => {
          return item.url;
        });
        this.$emit("change", this.rebackList);
      }
    },
    beforeUpload: function (file) {
      const isJPG = this.type.includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < this.maxSize;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    /**
     * 更新图片
     */
    updateImg: function (imgList) {
      if (this.limit == 1) {
        if (!imgList) {
          this.imgList = [];
          return;
        }
        this.imgList.push({ name: 1, url: imgList });
      } else {
        this.imgList = [];
        imgList.forEach((item, index) => {
          this.imgList.push({ name: index, url: item });
        });
      }
    },
  },
  props: {
    maxSize: {
      type: Number,
      default: 2,
    },
    limit: {
      type: Number,
      default: 1,
    },
  },
};
</script>
<style lang="less">
@img-width: 100px;

.img-upload {
  .el-upload-list {
    height: @img-width;

    .el-upload-list__item {
      margin-bottom: 0;
      width: @img-width;
      height: @img-width;
    }
  }

  .el-upload {
    position: relative;
    width: @img-width;
    height: @img-width;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;

    overflow: hidden;

    &:hover {
      border-color: #409eff;

      .hover {
        .el-upload-list__item-actions {
          // display: block;
          opacity: 1;
        }
      }
    }

    &.el-upload--picture-card {
      width: @img-width;
      height: @img-width;
      line-height: @img-width;

      .el-upload-list__item {
        width: @img-width;
        height: @img-width;
      }
    }
  }

  .uploader-icon {
    z-index: 100;
    position: relative;
    font-size: 28px;
    color: #8c939d;
    width: @img-width;
    height: @img-width;
    line-height: @img-width;
    text-align: center;
  }

  .img {
    max-width: @img-width;
    max-height: @img-width;
    display: block;
  }

  .el-upload-list__item-actions {
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0;
    // display: none;
    width: 100%;
    height: 100%;

    cursor: default;
    font-size: 20px;
    text-align: center;

    color: #fff;
    opacity: 0;

    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;

    &:after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle;
    }

    span {
      display: inline-block;
      cursor: pointer;

      & + span {
        margin-left: 10px;
      }
    }

    .el-upload-list__item-delete {
      position: static;
      font-size: inherit;
      color: inherit;
    }
  }

  .hover {
    .el-upload-list__item-actions:hover {
      // display: block;
      opacity: 1;
    }
  }

  .hide .el-upload--picture-card {
    display: none;
  }
}
</style>